{assign var=product_id value=$obj->getId()}

<a href="#" class="listIconClosed listIconOpened">{'Filter by rating or customer'|t}</a>

<div class="userCommentFilterPanel">
	<ul class="options">
		<li class="head"><h5>{"order"|t}:</h5></li>
		<li><input type="radio" name="order" value="best-opinions" id="op311"/> <label for="op311">{"best opinions"|t}</label></li>
		<li><input type="radio" name="order" value="newest" id="op312"/> <label for="op312">{"newest"|t}</label></li>
		<li><input type="radio" name="order" value="oldest" id="op312"/> <label for="op312">{"oldest"|t}</label></li>


	</ul>

	<ul class="options">
		<li class="head"><h5>gender:</h5></li>
		<li><input type="checkbox" name="slider[]" value="male" id="op311"/> <label for="op311">male</label></li>
		<li><input type="checkbox" name="slider[]" value="female" id="op312"/> <label for="op312">female</label></li>

	</ul>

	<br/>

	<div class="slider ntrp">
		<p class="label">NTPR</p>
		<div class="RatingSlider" id="ntrp"></div>
		<input type="hidden" name="slider[]" id="sliderh-ntrp" value=""/>
		<div class="values"></div>
	</div>
	<div class="slider age">
		<p class="label">{"age"|t}</p>
		<div class="RatingSlider" id="age"></div>
		<input type="hidden" name="slider[]" id="sliderh-age" value=""/>
<!--		<div class="values15"></div>-->
	</div>


	<script type="text/javascript">
		{literal}
			$('.RatingSlider').each(function(idx, elm) {
				if(elm.id == 'ntrp') {
					$( '#sliderh-' +elm.id ).val( elm.id + "|0|70");
					$('.slider #' +elm.id).slider({
					range: true,
					min: 10,
					max: 70,
					values: [ 10, 70 ],
					slide: function( event, ui ) {
						$( '#sliderh-' +elm.id ).val( elm.id + "|" + ui.values[ 0 ] + "|" + ui.values[ 1 ] );
					},
					change: function(event, ui) { 
						var u0 = ui.values[0]/10 - ui.values[0]/10 % 0.5;
						var u1 = ui.values[1]/10 - ui.values[1]/10 % 0.5;
						$('.ui-slider-handle').eq(0).html(u0);
						$('.ui-slider-handle').eq(1).html(u1);
						ui.values[0] = u0 * 10;
						ui.values[1] = u1 * 10;
						
						filterComment(); 
					} 
				}); 
				$('.ui-slider-handle').eq(0).html(1);
				$('.ui-slider-handle').eq(1).html(7);	 
				} else if(elm.id == 'age') {
					$( '#sliderh-' +elm.id ).val( elm.id + "|0|100");
					$('.slider #' +elm.id).slider({
					range: true,
					min: 0,
					max: 100,
					values: [ 0, 100 ],
					slide: function( event, ui ) {
						$( '#sliderh-' +elm.id ).val( elm.id + "|" + ui.values[ 0 ] + "|" + ui.values[ 1 ] );
					},
					change: function(event, ui) { 
						$(this).children('.ui-slider-handle').eq(0).html(ui.values[0]);
						$(this).children('.ui-slider-handle').eq(1).html(ui.values[1]);

						filterComment(); 
					}
				});
					
					
					$(this).children('.ui-slider-handle').eq(0).html(0);
					$(this).children('.ui-slider-handle').eq(1).html(100);	
				}
				
	

			});

		{/literal}
	</script>
	<input type="hidden" name="filter-action" id="filter-action" value="{url label=filterComment id=$product_id}" />
	<div class="clearBoth"></div>
</div>
